<template>
  <div class="orz">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>区域管理</span>
        <el-button icon="el-icon-plus" type="primary" @click="openAdd"
          >添加区域</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px;height: 100%;overflow: auto;"
        row-key="orzId"
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column prop="orzName" label="区域"> </el-table-column>
        <el-table-column prop="orzOrder" label="序号" sortable width="100">
        </el-table-column>
        <el-table-column prop="address" label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openAddOne(scope.row)"
              >添加</el-button
            >
            <el-button type="text" size="small" @click="openContact(scope.row)"
              >关联</el-button
            >
            <el-button type="text" size="small" @click="openEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="delFn(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加区域 -->
    <div class="addDialog">
      <el-dialog
        title="添加区域"
        :visible.sync="addDialogShow"
        width="30%"
        :destroy-on-close="true"
      >
        <el-form :model="addForm" class="demo-ruleForm">
          <el-form-item label="区域名称" required>
            <el-input
              v-model="addForm.orzName"
              clearable
              placeholder="请输入区域名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="显示排序" required>
            <el-input
              onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
              v-model="addForm.orzOrder"
              clearable
              placeholder="请输入显示排序"
            ></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogShow = false">取 消</el-button>
          <el-button
            type="primary"
            @click="addFn"
            :disabled="addForm.orzName && addForm.orzOrder ? false : true"
            >确 认</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 编辑区域 -->
    <div class="editDialog">
      <el-dialog
        title="编辑区域"
        :visible.sync="editDialogShow"
        width="30%"
        :destroy-on-close="true"
      >
        <el-form :model="editForm" class="demo-ruleForm">
          <el-form-item label="区域名称" required>
            <el-input
              v-model="editForm.orzName"
              clearable
              placeholder="请输入区域名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="显示排序" required>
            <el-input
              min="1"
              max="25"
              onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
              v-model="editForm.orzOrder"
              clearable
              placeholder="请输入显示排序"
            ></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogShow = false">取 消</el-button>
          <el-button
            type="primary"
            @click="editFn"
            :disabled="editForm.orzName && editForm.orzOrder ? false : true"
            >确 认</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 添加子区域 -->
    <div class="addOneDialog">
      <el-dialog
        title="添加区域"
        :visible.sync="addOneDialogShow"
        width="30%"
        :destroy-on-close="true"
      >
        <el-form :model="addOneForm" class="demo-ruleForm">
          <el-form-item label="区域名称" required>
            <el-input
              v-model="addOneForm.orzName"
              clearable
              placeholder="请输入区域名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="显示排序" required>
            <el-input
              min="1"
              max="25"
              onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
              v-model="addOneForm.orzOrder"
              clearable
              placeholder="请输入显示排序"
            ></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="addOneDialogShow = false">取 消</el-button>
          <el-button
            type="primary"
            @click="addOneFn"
            :disabled="addOneForm.orzName && addOneForm.orzOrder ? false : true"
            >确 认</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 关联区域设备 -->
    <div class="contactDialog">
      <el-dialog
        title="添加区域"
        :visible.sync="contactDialogShow"
        width="50%"
        :destroy-on-close="true"
      >
        <span>已选择{{ num }}</span>
        <el-table
          v-loading="loading1"
          height="300"
          ref="isExpand"
          :data="contactData"
          @selection-change="handleSelectionChange"
        >
          <template slot="empty">
            <el-empty description="暂无数据"></el-empty>
          </template>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="meterId" label="设备id"> </el-table-column>
          <el-table-column prop="meterName" label="设备名称"> </el-table-column>
          <el-table-column prop="meterAddress" label="安装地址">
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="contactData.length !== 0"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 30, 50, 70, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
        <span slot="footer" class="dialog-footer">
          <el-button @click="contactDialogShow = false">取 消</el-button>
          <el-button
            type="primary"
            @click="contactFn"
            :disabled="num !== 0 ? false : true"
            >确 认</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getOrzApi,
  addOrzApi,
  getOneOrzApi,
  editOneOrzApi,
  delOneOrzApi,
  getOrzMeterApi,
  contactOrzMeterApi,
} from "../../api/orz";
export default {
  data() {
    return {
      total: null,
      contactData: [],
      loading1: false,
      loading: false,
      tableData: [],
      addDialogShow: false,
      contactDialogShow: false,
      addOneDialogShow: false,
      editDialogShow: false,
      addForm: {
        orzName: "",
        orzOrder: "",
        orzParentId: 0,
      },
      addOneForm: {
        orzName: "",
        orzOrder: "",
        orzParentId: 0,
      },
      editForm: {
        orzName: "",
        orzOrder: "",
        orzParentId: 0,
      },
      editId: null,
      pageNum: 1,
      pageSize: 10,
      num: 0,
    };
  },
  mounted() {
    this.getOrz();
  },
  methods: {
    // 获取区域列表
    getOrz() {
      this.loading = true;
      getOrzApi().then((res) => {
        if (res.code == 200) {
          this.loading = false;
          this.tableData = res.data;
        }
      });
    },
    // 打开添加区域弹框
    openAdd() {
      this.addDialogShow = true;
      this.addForm = {
        orzName: "",
        orzOrder: "",
        orzParentId: 0,
      };
    },
    //添加
    addFn() {
      let loading = this.$loading({
        target: document.querySelector(".addDialog .el-dialog"),
        lock: true,
        text: "添加中...",
      });
      addOrzApi(this.addForm)
        .then((res) => {
          if (res.code == 200) {
            this.addDialogShow = false;
            loading.close();
            this.getOrz();
            this.$message.success("添加成功!");
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    // 删除
    delFn(e) {
      this.$confirm(`此操作将永久删除该区域及其子区域以及解除相关联的设备, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          let loading = this.$loading({
            lock: true,
            text: "删除中...",
          });
          delOneOrzApi(e.orzId)
            .then((res) => {
              if (res.code == 200) {
                loading.close();
                this.getOrz();
              }
            })
            .catch((err) => {
              loading.close();
            });
        })
        .catch((err) => {
          this.$message.info("已取消删除!");
        });
    },
    //打开编辑
    openEdit(e) {
      this.editId = e.orzId;
      getOneOrzApi(e.orzId).then((res) => {
        if (res.code == 200) {
          this.editForm = res.data;
          this.editDialogShow = true;
        }
      });
    },
    // 编辑
    editFn() {
      let loading = this.$loading({
        target: document.querySelector(".editDialog .el-dialog"),
        lock: true,
        text: "修改中...",
      });
      editOneOrzApi(this.editId, this.editForm)
        .then((res) => {
          if (res.code == 200) {
            loading.close();
            this.editDialogShow = false;
            this.getOrz();
            this.$message.success("修改成功!");
          }
        })
        .catch((err) => {
          loading.close();
        });
    },
    // 打开子区域
    openAddOne(e) {
      this.addOneDialogShow = true;
      this.addOneForm = {
        orzName: "",
        orzOrder: "",
        orzParentId: e.orzId,
      };
    },
    //添加子区域
    addOneFn() {
      let loading = this.$loading({
        target: document.querySelector(".addOneDialog .el-dialog"),
        lock: true,
        text: "添加中...",
      });
      addOrzApi(this.addOneForm)
        .then((res) => {
          if (res.code == 200) {
            this.addOneDialogShow = false;
            loading.close();
            this.getOrz();
            this.$message.success("添加成功!");
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    // 获取可关联设备
    getOrzMeter(e, pageNum, pageSize) {
      this.loading1 = true;
      getOrzMeterApi(e, pageNum, pageSize).then((res) => {
        if (res.code == 200) {
          this.total = res.data.total;
          this.loading1 = false;
          if (res.data.length !== 0) {
            this.contactData = res.data.rows;
          } else {
            this.contactData = [];
          }
        }
      });
    },
    // 电表分页
    handleSizeChange(val) {
      this.getOrzMeter(this.editId, this.pageNum, val);
      this.pageSize = val;
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    handleCurrentChange(val) {
      this.getOrzMeter(this.editId, val, this.pageSize);
      this.pageNum = val;
      this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    // 打开关联设备
    openContact(e) {
      this.editId = e.orzId;
      this.contactDialogShow = true;
      this.pageNum = 1;
      this.pageSize = 10;
      this.getOrzMeter(e.orzId, this.pageNum, this.pageSize);
    },
    handleSelectionChange(e) {
      this.num = e.length;
      this.deviceIds = [];
      e.forEach((item) => {
        this.deviceIds.push(item.meterId);
      });
    },
    // 关联
    contactFn() {
      let loading = this.$loading({
        target: document.querySelector(".contactDialog .el-dialog"),
        lock: true,
        text: "关联中...",
      });
      let arr = {
        deviceIds: this.deviceIds,
        orzId: this.editId,
      };
      contactOrzMeterApi(arr)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("关联成功");
            this.contactDialogShow = false;
            loading.close();
            this.getOrz();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
  },
};
</script>

<style lang="scss">
.orz {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);
  box-sizing: border-box;
  .el-card {
    height: 90%;
    /deep/ .el-table {
      height: 100%;
    }
  }
  .el-card__header {
    .clearfix {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .clearfix::after {
      content: none;
    }
  }
  .el-card__body{
    height: 80%
  }
}
</style>